<template>
    <div class="mui-content">
    <form  class="mui-input-group">
            <div class="mui-input-row">
                <label>账号</label>
                <input v-model="account" type="text" @keydown="enter" class="mui-input-clear mui-input" placeholder="请输入账号">
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input v-model="psw" autocomplete="off" @keydown="enter" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
            </div>
        </form>
    <div class="mui-content-padded">
        <mt-button type="danger" size="large" @click="register">注册</mt-button>

        </div>

    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    //使用axios进行get post请求
    import axios from 'axios'

    export default {
        name: "register",
        data(){
            return {
                account:'',
                psw:'',
            }
        },
        methods:{
          register(){
              //检测账号密码是否为空
              if(!this.account||this.account.trim()==''){
                  Toast('账号不能为空')
              }else if(!this.psw||this.psw.trim()==''){
                  Toast('密码不能为空')
              }else{
                  axios.get('/api/accountinfo').then(res=>{
                      //检查账号是否重复
                      if(!res.data){
                          return;
                      }
                      let flag=res.data.some(i=>{
                          if(i.account==this.account){
                              Toast('已存在相同的账号名')
                              return true
                          }
                      })
                      if(!flag){
                          //如果不存在相同账号名则向后台post账号密码
                          axios.post('/api/accountinfo',{account:this.account,psw:this.psw}).then(res=>{
                              console.log(res)
                              if(res.status==200){
                                  Toast('注册成功')
                                  this.$router.push('/login')
                              }
                          }).catch(e=>{
                              console.log(e)
                          })
                      }
                  }).catch(e=>{
                      console.log(e)
                  })
              }
          },
            enter(e){
                if(e.keyCode==13){
                    this.register()
                }
            },
        },

    }
</script>

<style lang="scss" scoped>
    .mui-content{
        background-color: #fff;
    }
/*.mui-btn-primary{*/
    /*height: 47px;*/
/*}*/
</style>